<script setup lang="ts">
import { computed, h, ref } from 'vue'
import { Button, Modal, message } from 'ant-design-vue'
import { DownloadOutlined, ZoomInOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'FormCandidateHandbook',
})

const showZoomModal = ref(false)
const zoomLevel = ref(100)
const basePdfUrl = 'https://f.hotgrid.cn/electricity-service/考生必读（2025年9月更新）.pdf'
// 添加参数隐藏浏览器默认的PDF工具栏、导航和滚动条，只显示PDF内容
const pdfUrl = computed(() => `${basePdfUrl}#toolbar=0&navpanes=0&scrollbar=0&view=FitH`)

// 下载PDF功能
async function handleDownload() {
  try {
    message.loading('正在下载PDF文件...', 0)

    const response = await fetch(basePdfUrl)
    if (!response.ok) {
      throw new Error('下载失败')
    }

    const blob = await response.blob()
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = '考生必读（2025年9月更新）.pdf'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)

    message.destroy()
    message.success('PDF文件下载成功')
  }
  catch (error) {
    message.destroy()
    console.error('下载失败:', error)
    message.error('下载失败，请重试')
  }
}

// 放大查看功能
function handleZoomIn() {
  showZoomModal.value = true
  zoomLevel.value = 100
}

function handleZoomChange(delta: number) {
  zoomLevel.value = Math.max(50, Math.min(200, zoomLevel.value + delta))
}

function resetZoom() {
  zoomLevel.value = 100
}
</script>

<template>
  <page-container>
    <!-- 工具栏 -->
    <div
      class=""
      style="position: absolute;
    right:10px;
    "
    >
      <Button
        class="btn-ccpit-payment"
        type="primary" :icon="h(DownloadOutlined)" @click="handleDownload"
      >
        下载
      </Button>&nbsp;
      <Button
        class="btn-ccpit-detail"
        type="default" :icon="h(ZoomInOutlined)" @click="handleZoomIn"
      >
        放大查看
      </Button>
    </div>

    <div
      class="pdf-container"
      style="
        position: relative;
        top: -21px;
        width: 100%;
        height: 89vh;
        overflow: hidden;
      "
    >
      <embed
        :src="pdfUrl"
        type="application/pdf"
        class="pdf-viewer"
        style="
          width: 100%;
          height: 100%;
          border: none;
        "
      />
    </div>

    <!-- 放大查看模态框 -->
    <Modal
      v-model:open="showZoomModal"
      title="考生必读（2025年9月更新）"
      :width="1400"
      :footer="null"
      class="zoom-modal"
      :styles="{ body: { padding: '0', height: '80vh' } }"
    >
      <div class="zoom-controls">
        <Button.Group>
          <Button @click="handleZoomChange(-10)">
            缩小
          </Button>
          <Button @click="resetZoom">
            {{ zoomLevel }}%
          </Button>
          <Button @click="handleZoomChange(10)">
            放大
          </Button>
        </Button.Group>
      </div>
      <div
        class="zoom-content"
        style="
          overflow: auto;
          height: calc(80vh - 60px);
          display: flex;
          justify-content: center;
          background: #f5f5f5;
        "
      >
        <div
          class="pdf-zoom-wrapper"
          :style="{
            transform: `scale(${zoomLevel / 100})`,
            transformOrigin: 'top center',
            width: '100%',
            height: '100%',
          }"
        >
          <embed
            :src="pdfUrl"
            type="application/pdf"
            class="pdf-viewer-zoom"
            style="
              width: 100%;
              height: 100vh;
              border: none;
            "
          />
        </div>
      </div>
    </Modal>
  </page-container>
</template>

<style scoped>
@import "./index.css";
</style>
